<template>
	<div class="el-full el-box-column">
		<el-card class="box-card el-card-flex">
			<div slot="header" class="clearfix">
				<span>
					<i class="el-icon-warning-outline"></i>
					会议详情
				</span>
			</div>
			<div class="text item el-over-auto">
				<el-form label-width="300px" ref="addData" :model="addData">
					<el-form-item label="" prop="">
						<el-col :span="18">
							<span style="color:#909399">预定人：{{addData.createdByName}}</span>
							<span style="color:#909399;padding-left:10px">会议室：{{addData.roomName}}</span>
							<span style="color:#909399;padding-left:10px">位置：{{addData.position}}</span>
						</el-col>

					</el-form-item>
					<el-form-item label="会议主题：" prop="meetingSubject">
						<el-col :span="12">
							{{addData.meetingSubject}}
						</el-col>
					</el-form-item>
					<el-form-item label="会议编码：" prop="reservationCode">
						<el-col :span="12">
							{{addData.reservationCode}}
						</el-col>
					</el-form-item>
					<el-form-item label="会议日期：" required style="margin-bottom: 0;">
						<el-col :span="10" style="width: auto;margin-right: 10px;">
							<el-form-item prop="meetingDate" :rules="{ required: true, message: '请选择会议日期'}">
								<el-date-picker :clearable="false" v-model="addData.meetingDate" type="date" style="width:180px" placeholder="选择日期"
								 format="yyyy-MM-dd" value-format="yyyy-MM-dd">
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="10" style="width: auto;">
							<el-form-item prop="startTime" :rules="{ required: true, message: '请选择开始时间'}">
								<el-time-select :clearable="false" placeholder="开始时间" v-model="addData.startTime" style="width:120px"
								 :picker-options="{
					      start: intervalTimes.startTime,
					      step: '0'+intervalTimes.intervalTime+':00',
					      end: intervalTimes.endTime,
					      maxTime: addData.endTime
					      }"
								 @change="roomTimeChange">
								</el-time-select>
							</el-form-item>
						</el-col>
						<el-col :span="10" style="width: 25px;text-align: center;">-</el-col>
						<el-col :span="10" style="width: auto;">
							<el-form-item prop="endTime" :rules="{ required: true, message: '请选择结束时间'}">
								<el-time-select :clearable="false" placeholder="结束时间" v-model="addData.endTime" style="width:120px"
								 :picker-options="{
					      start: intervalTimes.startTime,
					      step: '0'+intervalTimes.intervalTime+':00',
					      end: intervalTimes.endTime,
					      minTime: addData.startTime
					  }"
								 @change="roomTimeChange">
								</el-time-select>
							</el-form-item>
						</el-col>

					</el-form-item>

					<el-form-item label="组织内参会人员：" prop="roomAttendees">
						<el-col :span="24">
							<el-tag v-for="tag in addData.roomAttendeesList" :key="tag.attendee" size="medium">
								{{tag.attendee}}
							</el-tag>
						</el-col>
					</el-form-item>
					<el-form-item label="外部参会人员：" prop="foreigners">
						<el-col :span="24">
							<el-tag v-for="(tag,ind) in addData.foreigners" :key="ind" size="medium" @close="removeForeigners(tag)">
								{{tag}}
							</el-tag>
						</el-col>
					</el-form-item>
					<el-form-item label="参会人数：" prop="members">
						<el-col :span="12">
							{{addData.members}}
						</el-col>
					</el-form-item>
					<el-form-item label="内容：" prop="meetingContent">
						<el-col :span="12">
							{{
							addData.meetingContent
						}}
						</el-col>
					</el-form-item>
					<el-form-item label="附件:">
						<el-col :span="12" class="upload-view">
							<el-upload :disabled="true" action="#" :file-list="fileList" :on-preview="handlePreview">
							</el-upload>
						</el-col>
					</el-form-item>
					<el-form-item label="" v-if="addData.price">
						<el-col :span="12">
							<div class="priceD" style="border-bottom:none;">
								<span style="color:#666">会议室费用使用标准</span>
								<span style="float:right;color:#666">{{addData.price}}元/小时</span>
							</div>
							<div class="priceD" style="border-bottom:none;border-top:none;">
								<span style="color:#666">会议时长</span>
								<span style="float:right;color:#666">{{addData.duration}}小时</span>
							</div>
							<div class="priceD">
								<span>预计会议费用</span>
								<span style="float:right;color:red">￥{{addData.cost}}</span>
							</div>
						</el-col>
					</el-form-item>
					<el-form-item label="" prop="" v-if="addData.auditStatusDesc">
						<el-col :span="12">
							<el-input type="textarea" :rows="4" v-model="addData.content" placeholder="请填写内容"></el-input>
							<el-button type="danger" style="display:block;float:right;margin-top:8px" @click="handleCheckContent('addData')">回
								复 <i class="el-icon-document-checked"></i></el-button>
						</el-col>
					</el-form-item>
					<el-form-item label="" prop="" v-if="addData.auditStatusDesc">
						<el-col :span="12">
							<div class="text item el-over-auto">
								<ul class="text mid-panels">
									<li class="el-box panel" v-for="(val, index) in addData.roomCommentList" :key="index">
										<div class="user-avatar">{{val.attendee}}</div>
										<div class="listRightPart">
											<span class="name">{{val.attendee}}</span>
											<span class="dept">{{val.content}}</span>
											<p>{{val.creationDate}}<span style="float:right;color:#909399" @click="handDelete(val)">删除</span></p>
										</div>

									</li>
								</ul>
							</div>
						</el-col>
					</el-form-item>
				</el-form>
			</div>
			<div style="text-align: right;margin-bottom: 8px;margin-right: 8px;">
				<el-button type="" @click="handleCheckAdd('addData')" v-if="addData.auditStatus!='C'">保 存 <i class="el-icon-document-checked"></i></el-button>
				<el-button type="primary" @click="handleConsent('addData')" v-if="addData.auditStatus=='C'">批 准 <i class="el-icon-document-checked"></i></el-button>
				<el-button type="" @click="handleRejected('addData')" v-if="addData.auditStatus=='C'">驳 回 <i class="el-icon-refresh-left"></i></el-button>
				<el-button type="danger" @click="cancelEvt()">关 闭 <i class="el-icon-close"></i></el-button>
			</div>
		</el-card>
	</div>
</template>
<script>
	import {
		Dialog,
		Table,
		TableColumn,
		Pagination,
		MessageBox,
		Message,
		Drawer,
		Tabs,
		TabPane,
		Upload
	} from 'element-ui'
	import {
		attachPath, //附件绝对地址
		uploadByBusinessUrl, //上传接口
		findAttchList, //获取文件列表
		preview, //预览图片
		deleteAttid, //附件删除
		downloadAttach, //附件下载
	} from '@/api/attachCommon/attachCommon.js'
	import {
		getCookie //获取cookie
	} from '@/api/layout/layout.js'

	import {
		addReservation, //保存会议室预定
		upReservation, //修改会议室预定
		putReservation, //提交会议室预定
		getReservation, //获取会议室详情
		childrenDict, //会议提醒间隔
		//获取会议预定编码
	} from '@/api/conference/reservation.js'
	import {
		delComment, //删除会议评论
		addComment, //新增会议评论
		commentList, //查询会议评论
		putAudit, //会议室预定审核处理
	} from '@/api/conference/conferenceEmploy.js'
	import {
		createList, //我发起的列表
		joinList, //我参与的
		putAttendeeIdattendee, //参加或者不参加会议处理
		putCancel, //取消会议
	} from '@/api/conference/conferenceEmploy.js'
	import {
		nextval, //获取编码规则
	} from '@/api/conference/conferenceManage.js'
	import {
		getTime
	} from '@/api/conference/Initialize.js'
	export default {
		components: {
			'el-dialog': Dialog, // 对话框
			'el-table': Table, // 表格
			'el-table-column': TableColumn, // 表格列
			'el-pagination': Pagination, // 分页
			'el-drawer': Drawer, // 抽屉
			'el-tabs': Tabs, // 标签页
			'el-tab-pane': TabPane, // 标签页列
			"el-upload": Upload, //上传
		},
		data() {
			return {
				intervalTimes: {}, //预定时间设置
				myMeetingCurrentRow: {},
				myMeetingData: [], //我的会议表格数据源
				attendeeDialogVisible: false, //复制参会人员对话框是否开启
				uploadByBusinessUrl: uploadByBusinessUrl, //附件上传接口
				foreignersInput: false, //添加外部人员的输入框是否显示
				foreigners: '', //外部参会人员存储
				elDialogTreeKey: 3,
				imageUrl: '',
				getFile: {},
				headingId: '',
				fileData: {
					sysCode: getCookie("sysCode"), //系统编码
					bigCatName: '会议',
					smallCatName: '附件',
					businessId: ''
				},
				addData: {
					reservationId: '',
					reservationCode: '',
					createdByName: '',
					roomName: '',
					name3: '',
					meetingSubject: '',
					meetingDate: '',
					startTime: '',
					endTime: '',
					members: '0',
					notifyMode: 'ec8304ebc583447ebdb816e17b3c0c4b',
					notifyIntervalTime: '85ae0f27647d4ad182e88b4d8c547998',
					meetingContent: '',
					roomCommentList: [],
					content: '',
					roomAttendeesList: [],
					roomAttendees: '',
					duration: '',
					cost: '',
					foreigners: [] //外部参会人员

				},
				roomAttendeesList: [],
				duration: '',
				cost: '',
				articleTemplateList: [], //栏目内容下拉
				addStatus: [], //栏目模板
				isShow: false,
				fileList: [],
				formTitle: '预定会议室',
				imgAttid: '',
				dialogImageUrl: '',
				dialogVisible: false,
				dialogprincipalVisible: false, //选择人员
				dialogOrgVisible: false, //选择组织
				dialogGroupVisible: false, //选择会议类型
				dialogAddrVisible: false, //选择位置
				notifyIntervalArr: [], //提醒时间
				notifyModeArr: [], //提醒方式
				isDis: false,
				isput: false,
				meetingDate: new Date,
				startTime: '',
				endTime: '',
				reservationCode: ''
				// employeesPeople:[
				//     {
				//         attendee: '张一',
				//         content: '你说什么'
				//     }
				// ]

			}
		},
		created() {
			getTime().then((res) => {
				if (res.data.code == 10000) {
					this.intervalTimes = res.data.data //预定时间设置
				}
			})
			if (this.$route.params.row.auditStatusDesc) {
				this.authorizationTabel(this.$route.params.row.reservationId)

			} else {

				Object.assign(this.addData, this.$route.params.row)

				if (!this.addData.foreigners) {
					this.addData.foreigners = []
				} else if (!Array.isArray(this.addData.foreigners)) {
					this.addData.foreigners = this.addData.foreigners.split(",")
				}
				this.roomTimeChange() //设置会议时长和费用
				this.addData.position = this.addData.positionName
				this.isput = true;
				nextval('CCIT_RESERVATION_CODE', []).then((res) => {
					if (res.data.code == 10000) {
						this.addData.reservationCode = res.data.data
					}
				})
				this.axios.get('/home/loginUser').then(res => {
					if (res.data.code != 10000) return;
					this.addData.createdByName = res.data.data.empName
				});


			}

		},
		/* 监听对象变化 */
		watch: {
			/* 监听参会人员 ,用作校验特殊处理*/
			'addData.roomAttendeesList': {
				handler(newValue, oldValue) {
					if (newValue.length) {
						this.addData.roomAttendees = " "
					} else {
						this.addData.roomAttendees = ""
					}
				}
			}
		},
		methods: {
			/* 附件下载 */
			handlePreview(file) {
				downloadAttach(file.attId)
			},
			//关闭
			cancelEvt() {
				this.$router.go(-1)
			},
			// 编辑表格获取单条数据事件
			authorizationTabel(id) {
				getReservation(id, '2').then(res => {
					if (res.data.code == 10000) {
						Object.assign(this.addData, this.$route.params.row)
						if (!this.addData.foreigners) {
							this.addData.foreigners = []
						} else if (!Array.isArray(this.addData.foreigners)) {
							this.addData.foreigners = this.addData.foreigners.split(",")
						}
						if (this.addData.auditStatus == 'E' && this.addData.currentStatus == '未开始') {
							this.isDis = true
						} else {
							this.isDis = false;
						}
						if ((this.addData.auditStatus == 'A') && this.addData.currentStatus == '未开始') {
							this.isput = true
						} else {
							this.isput = false
						}

					}
					this.roomTimeChange() //设置会议时长和费用
					//获取附件
					findAttchList({
						businessId: id
					}).then((res) => {
						if (res.data.code == 10000) {
							if (res.data.data.records !== []) {
								let atts = res.data.data.records
								this.fileList.splice(0, this.fileList.length)
								atts.forEach((v) => {
									this.fileList.push({
										name: v.attFullName,
										url: attachPath + v.attRefId,
										attId: v.attId
									})
								})
							}
						}
					})
					this.getComment()//获取评论
				})
			},
			/* 设置会议时长和费用 */
			roomTimeChange() {
				if (!this.addData.startTime || !this.addData.endTime) return
				let date1 = new Date(this.addData.meetingDate + " " + this.addData.startTime)
				let date2 = new Date(this.addData.meetingDate + " " + this.addData.endTime)
				this.addData.duration = (date2.getTime() - date1.getTime()) / 3600000
				this.addData.cost = this.addData.price * this.addData.duration

			},
			/* 提取请求参数 */
			extractDatas() {
				let sendDatas = {
					meetingSubject: this.addData.meetingSubject,
					meetingDate: this.addData.meetingDate,
					startTime: this.addData.startTime,
					endTime: this.addData.endTime,
					members: this.addData.members,
					notifyMode: this.addData.notifyMode,
					notifyIntervalTime: this.addData.notifyIntervalTime,
					meetingContent: this.addData.meetingContent,
					roomId: this.addData.roomId,
					roomAttendeesList: this.addData.roomAttendeesList,
					reservationCode: this.addData.reservationCode,
					foreigners: this.addData.foreigners.join(",") //外部参会人员
				}
				if (this.addData.reservationId) {
					sendDatas.reservationId = this.addData.reservationId
				}
				return sendDatas
			},
			/* 保存 */
			handleCheckAdd(formName) {
				this.$refs[formName].validate((valid) => {
					if (!valid) return //校验
					upReservation(this.extractDatas()).then((res) => {
						if (res.data.code == 10000) {
							Message({
								type: 'success',
								message: "保存成功"
							})
							this.$router.go(-1)
						}
					})
				});
			},
			/* 批准之前先保存 */
			handleConsent(formName) {
				this.$refs["addData"].validate((valid) => {
					if (!valid) return //校验
					MessageBox.confirm("您确定要批准“" + this.addData.meetingSubject + "”吗?", '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						})
						.then(() => {
							upReservation(this.extractDatas()).then((res) => {
								if (res.data.code != 10000) return
								putAudit({
									auditStatus: 'E',
									auditStatusDesc: '批准'
								}, this.addData.reservationId).then(res => {
									if (res.data.code != 10000) return
									Message.success('批准成功')
									this.$router.go(-1)
								})
							})
						})
						.catch(() => {})
				});
			},
			//驳回
			handleRejected(formName) {
				MessageBox.confirm("您确定要驳回“" + this.addData.meetingSubject + "”吗?", '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						putAudit({
							auditStatus: 'D',
							auditStatusDesc: '驳回'
						}, this.addData.reservationId).then(res => {
							if (res.data.code === 10000) {
								Message.success('驳回成功')
								this.$router.go(-1)
							}
						})
					})
					.catch(() => {})
			},

			//获取会议评论
			getComment() {
				commentList(this.addData.reservationId).then((res) => {
					if (res.data.code == 10000) {
						this.addData.roomCommentList = res.data.data
					}
				})
			},
			//新增评论
			handleCheckContent() {
				if (!this.addData.content) {
					Message.warning('请输入评论内容')
					return;
				}
				addComment({
					content: this.addData.content,
					reservationId: this.addData.reservationId
				}).then((res) => {
					if (res.data.code == 10000) {
						Message.success('评论成功')
						this.getComment()
						this.addData.content = ''
					}
				})
			},
			//删除会议评论
			handDelete(v) {
				// 
				MessageBox.confirm("是否确定删除评论?", '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						delComment(v.commentId).then(res => {
							if (res.data.code === 10000) {
								Message.success('删除成功')
								this.getComment()
								// this.myDelegateTable()
							}
						})
					})
					.catch(() => {})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.mid-panels {
		li {
			padding: 15px 10px 7px;
			font-size: 12px;
			color: #333333;
			border-top: 1px solid #ededed;

			// overflow: hidden;
			.user-avatar {
				width: 40px;
				height: 36px;
				text-align: center;
				line-height: 36px;
				border-radius: 50%;
				color: #ffffff;
				background-color: #81C684;
			}

			.listRightPart {
				width: 100% !important;
				display: inline-block;
				padding-left: 10px;
				vertical-align: middle;

				.name {
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 12px;
					color: #333333;
				}

				.dept {
					font-size: 12px;
					color: #333333;
				}
			}

			&:hover {
				cursor: pointer;
				background-color: #fff;
			}
		}

		.loading {
			height: 20px;
			line-height: 20px;
			padding: 0 0 15px 100px;
		}
	}

	.priceD {
		border: 1px solid #ccc;
		padding: 10px;
	}

	.el-tag--medium {
		height: 30px;
		line-height: 28px;
		margin-right: 10px;
		margin-bottom: 10px;
	}

	.el-tag .el-icon-close {
		top: 0 !important;
	}
</style>
